<template>
  <view class="outbound-container">
    <!-- 页面头部 -->
<!--    <view class="page-header">
      <view class="header-left" @click="goBack">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
        <text class="back-text">返回</text>
      </view>
      <view class="header-right"></view>
    </view>-->

    <!-- 功能菜单 -->
    <view class="function-menu">
      <view class="menu-item" @click="goToProductOutbound">
        <view class="menu-icon">
          <uni-icons type="shop" size="40" color="#007AFF"></uni-icons>
        </view>
        <view class="menu-content">
          <text class="menu-text">成品出库</text>
          <text class="menu-desc">扫描产品条码进行出库操作</text>
        </view>
      </view>
      
      <view class="menu-item" @click="goToMiscOutbound">
        <view class="menu-icon">
          <uni-icons type="paperplane" size="40" color="#e83e8c"></uni-icons>
        </view>
        <view class="menu-content">
          <text class="menu-text">其他出库</text>
          <text class="menu-desc">研发样机、报废、调拨、退货等出库</text>
        </view>
      </view>
      
      <view class="menu-item" @click="goToOutboundHistory">
        <view class="menu-icon">
          <uni-icons type="list" size="40" color="#28a745"></uni-icons>
        </view>
        <view class="menu-content">
          <text class="menu-text">出库记录</text>
          <text class="menu-desc">查看历史出库记录</text>
        </view>
      </view>
      
      <view class="menu-item" @click="goToOutboundStatistics">
        <view class="menu-icon">
          <uni-icons type="bar-chart" size="40" color="#ffc107"></uni-icons>
        </view>
        <view class="menu-content">
          <text class="menu-text">出库统计</text>
          <text class="menu-desc">查看出库统计数据</text>
        </view>
      </view>
    </view>

    <!-- 快速操作 -->
    <view class="quick-actions">
      <view class="action-title">快速操作</view>
      <view class="action-buttons">
        <button class="action-btn primary" @click="goToProductOutbound">
          <uni-icons type="scan" size="20" color="#fff"></uni-icons>
          <text>扫描出库</text>
        </button>
        <button class="action-btn secondary" @click="goToOutboundHistory">
          <uni-icons type="search" size="20" color="#007AFF"></uni-icons>
          <text>查询记录</text>
        </button>
      </view>
    </view>

    <!-- 今日统计 -->
    <view class="today-stats">
      <view class="stats-title">今日出库统计</view>
      <view class="stats-grid">
        <view class="stat-item">
          <text class="stat-value">{{ todayStats.totalOrders }}</text>
          <text class="stat-label">出库单数</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ todayStats.totalQuantity }}</text>
          <text class="stat-label">出库数量</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ todayStats.totalProducts }}</text>
          <text class="stat-label">产品种类</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ todayStats.completedOrders }}</text>
          <text class="stat-label">已完成</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'OutboundIndex',
  data() {
    return {
      todayStats: {
        totalOrders: 0,
        totalQuantity: 0,
        totalProducts: 0,
        completedOrders: 0
      }
    }
  },
  
  onLoad() {
    this.loadTodayStats()
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 跳转到成品出库页面
    goToProductOutbound() {
      uni.navigateTo({
        url: '/pages/app/outbound/product'
      })
    },
    
    // 跳转到其他出库页面
    goToMiscOutbound() {
      uni.navigateTo({
        url: '/pages/app/outbound/misc',
        success: () => {},
        fail: (err) => {
          console.error('跳转到其他出库页面失败:', err)
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          })
        }
      })
    },
    
    // 跳转到出库记录页面
    goToOutboundHistory() {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    },
    
    // 跳转到出库统计页面
    goToOutboundStatistics() {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    },
    
    // 加载今日统计
    async loadTodayStats() {
      try {
        // 这里可以调用API获取今日出库统计
        // const response = await getTodayOutboundStats()
        // this.todayStats = response.data
        
        // 模拟数据
        this.todayStats = {
          totalOrders: 12,
          totalQuantity: 156,
          totalProducts: 8,
          completedOrders: 10
        }
      } catch (error) {
        console.error('加载今日统计失败:', error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.outbound-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20rpx 30rpx;
  background: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
  color: #fff;
  
  .header-left {
    display: flex;
    align-items: center;
    gap: 10rpx;
    
    .back-text {
      font-size: 28rpx;
    }
  }
  
  .header-right {
    flex: 1; // 占据剩余空间
  }
}

.function-menu {
  margin: 20rpx;
  
  .menu-item {
    background: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    display: flex;
    align-items: center;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    
    .menu-icon {
      margin-right: 20rpx;
    }
    
    .menu-content {
      flex: 1;
    }
    
    .menu-text {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 8rpx;
      display: block;
    }
    
    .menu-desc {
      font-size: 24rpx;
      color: #666;
      display: block;
    }
  }
}

.quick-actions {
  margin: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  
  .action-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .action-buttons {
    display: flex;
    gap: 20rpx;
    
    .action-btn {
      flex: 1;
      height: 80rpx;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10rpx;
      font-size: 28rpx;
      font-weight: bold;
      
      &.primary {
        background: #007AFF;
        color: #fff;
        border: none;
      }
      
      &.secondary {
        background: #fff;
        color: #007AFF;
        border: 2rpx solid #007AFF;
      }
    }
  }
}

.today-stats {
  margin: 20rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  
  .stats-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .stats-grid {
    display: flex;
    justify-content: space-between;
    
    .stat-item {
      text-align: center;
      
      .stat-value {
        display: block;
        font-size: 36rpx;
        font-weight: bold;
        color: #007AFF;
        margin-bottom: 8rpx;
      }
      
      .stat-label {
        font-size: 22rpx;
        color: #666;
      }
    }
  }
}
</style>
